﻿<!doctype html>
<html>
<head>
<title>layer-更懂你的web弹窗解决方案</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<style>
html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'}
pre{font-family:'微软雅黑'}
.box{padding:20px; background-color:#fff; margin:50px 100px; border-radius:5px;}
.box a{padding-right:15px;}
#about_hide{display:none}
.layer_text{background-color:#fff; padding:20px;}
.layer_text p{margin-bottom: 10px; text-indent: 2em; line-height: 23px;}
</style>
<body>
<div class="box">
<pre>
 @Name : layer v<script>document.write(layer.v)</script> 弹层组件说明
 @author: 贤心
 @date: 2013-4-17
 @QQ群：176047238(layer交流群)
 @Copyright: Sentsin Xu(贤心)
 
 @blog: <a href="http://sentsin.com">http://sentsin.com</a>
 @微博：<a href="http://weibo.com/SentsinXu">http://weibo.com/SentsinXu</a> <a href="http://t.qq.com/xian_xin">http://t.qq.com/xian_xin</a>
 @官网说明：<a href="http://sentsin.com/jquery/layer">http://sentsin.com/jquery/layer</a>
 @赞助layer:<a href="https://me.alipay.com/sentsin"> https://me.alipay.com/sentsin</a>


【注意事项】
一、使用时，请将layer整个文件夹放置你站点的任何一个目录，layer.js 开发版，layer.min.js 压缩版，引入其中一个即可。，css等其它文件无需引入。
二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径，您需要打开layer.js 或者 layer.min.js 去配置相对路径url。（默认采用自动获取layer.js所在的路径）
三、jquery必须为1.8或1.8以上版本（原因，更小，性能更好，且新版layer使用了部分jq1.8的特性），下载包里的jquery即为1.8.2下载地址
四、更多使用说明与演示（demo），请参见layer官网。
五、layer永久免费，未经作者允许，请勿用于商业用途。版权最终解释权：贤心。
</pre>
</div>

<div id="about_hide">
<div class="layer_text">
<h2>一些唠叨</h2>
<p><i>layer</i>，一个可以让你想到即可做到的<i>web</i>弹窗（层）解决方案（js组件），作者贤心（菜鸟级前端攻城师）。<i>layer</i>侧重于用户灵活的自定义，为不同人的使用习惯提供动力。其意义在于，可以让您的页面拥有更丰富与便捷的操作体验，而这，您只需在调用时简单地配置相关参数，即可轻松实现。</p>
<p>与同类弹出层组件相比，<i>layer</i>的优势明显，她尽可能地在以更少的代码展现出更强健的功能。<i>layer</i>格外注重性能的提升，采用面向对象的思想实现，在多层模式的回调处理中，具备其它多数层组件所没有的“独立不冲突” 您完全可以大可放心地在页面弹出任意数量的层，她们彼此不妨碍。当你问及她的兼容时，<i>layer</i>必须告诉你，她兼容了一切浏览器，包括古老的ie6。</p>
<p><i>layer</i>公开了如此多的接口（api），这使得您可以DIY太多您需要的风格，尤其是页面层模式，意味着必要时您可以完全抛弃<i>layer</i>的现有皮肤，并用你的思维去勾勒她的衣着。而问题在于，我必须中止“王婆卖瓜”的陈述。因为一切的不足或友好，都需要您在使用过程中去发现。</p>
<p>据不完全统计，截至到2013年2月1号，layer已服务于3000多家web平台（网站）。</p>
</div>
</div>

<div class="box" style="text-align:center">
<a href="http://sentsin.com/jquery/layer/">使用文档</a>
<a href="javascript:;" id="about">关于layer</a>
<a href="http://sentsin.com/jquery/layer/data.html">更新日志</a>
<a href="http://sentsin.com/web/layer.html#comment" id="suggest">建议反馈</a>
<a href="javascript:;" id="wish">给2013许个愿吧</a>
</div> 


<script>
(function(){

layer.alert('hello,亲爱的朋友，当你看到这个的时候，意味着你已将layer下载到你的本地，并正常地运行了它。layer是一款基于web的弹窗解决方案，旨在为你的产品增强体验。——贤心 <a href="http://sentsin.com">sentsin.com</a>',9,false);

$('#about').on('click',function(event){
	event.preventDefault();
	$.layer({
		type : 1,
		offset : ['100px',''],
		shade: ['','',false],
		area : ['900px','auto'],
		page : {dom : '#about_hide'}
	});
});


$('#suggest').on('click',function(event){
	event.preventDefault();
	$.layer({
		type : 2,
		fix : false,
		shade : [0.8 , '#E3E3E3' , true],
		shadeClose : true,
		border : [10 , 0.7 , '#272822', true],
		title : ['',false],
		offset : ['30px',''],
		area : ['960px','9500px'],
		iframe : {src : $(this).attr('href')}
	});
});


$('#wish').on('click',function(event){
	event.preventDefault();
	$.layer({
		type: 2,
		title: ['',false],
		offset: ['100px',''],
		closeBtn: [0,false],
		area: ['590px', '380px'],
		border: [10 , 0.5 , '#EF8016', false],
		iframe: {src : 'http://sentsin.com/hello/year2013.html'},
		success:function(layerDom){
			layerDom.append('<div id="y2013_move" style="height:110px; width:590px; cursor:move; position:absolute; top:0; left:0; z-index:20000000;"></div><div id="y2013_close" style="position:absolute;right:0; top:0; width:40px; height:40px; cursor:pointer; z-index:20000001;"><div>');
			this.move = ['#y2013_move', true];
			layer.setMove();
			$('#y2013_close').on('click', function(){
				var index = layer.getIndex(this);
				layer.close(index);
			});
		}
	});
	layer.tips('许个好愿吧', '#wish', 5);
});
layer.ready(function(){
	layer.tips('一定会实现噢', '#wish');
});

})();
</script>
</body>
</html>